<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Form Design Wizard</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../css/style.css" type="text/css">
</head>

<body>
<table width="100%" border="0" cellpadding="4">
  <tr>
    <td class="head" height="16">Form Design Wizard</td>
  </tr>
  <tr>
    <td bgcolor="#FF9900" height="6"></td>
  </tr>
  <tr>
    <td height=6></td>
  </tr>
</table>
<p class="title">Form Design Wizard</p>
<p class="text">This wizard is used to set align and size of compnents. Both Delphi/C++Builder are supported. It's enabled when current window is Form designer.</p>
<p class="text">
Some functions are only enabled when one or more components are selected. And some process for properties comes from those in the first component in selection. So please note the selection order of components.</p>
<p class="text">Menu items of this wizard is as below:</p>
<p class="text" align="center">
<img src="alignsizemenu.png"></p>
<ul>
  <li>
  <p class="text" align="left"><b>Align Left Edges</b>: Align selected components' left edges to first selected component. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Align Right Edges</b>: Align selected components' right edges to first selected component. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Align Top Edges</b>: Align selected components' top edges to first selected component. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Align Bottom Edges</b>: Align selected components' bottom edges to first selected component. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Align Horizontal Centers</b>: Align selected components' horizontal center to first selected component. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Align Vertical Centers</b>: Align selected components' vertical centers to first selected component. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Space Equally Horizontally</b>: Space selected components equally horizontally. It's enabled when selected count &gt;= 3.</li>
  <li>
  <p class="text" align="left"><b>Space Equally Horizontally by...</b>: Space selected components equally horizontally by a given value. It's enabled when selected count &gt;= 
	2.</li>
  <li>
  <p class="text" align="left"><b>Increase Horizontal Space</b>: Increase horizontal space of selected components. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Decrease Horizontal Space</b>: Decrease horizontal space of selected components. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Removed Horizontal Space</b>: Remove horizontal space of selected components. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Space Equally Vertically</b>: Space selected components equally vertically. It's enabled when selected count &gt;= 3.</li>
  <li>
  <p class="text" align="left"><b>Space Equally Vertically by...</b>: Space selected components equally vertically by a given value. It's enabled when selected count &gt;= 
	2.</li>
  <li>
  <p class="text" align="left"><b>Increase Vertical Space</b>: Increase vertical space of selected components. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Decrease Vertical Space</b>: Decrease vertical space of selected components. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Removed Vertical Space</b>: Remove vertical space of selected components. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Increase Width</b>: Increase width of selected component(s).</li>
  <li>
  <p class="text" align="left"><b>Decrease Width</b>: Decrease width of selected component(s).</li>
  <li>
  <p class="text" align="left"><b>Increase Height</b>: Increase height of selected component(s).</li>
  <li>
  <p class="text" align="left"><b>Decrease Height</b>: Decrease height of selected component(s).</li>
  <li>
  <p class="text" align="left"><b>Grow Width to Largest</b>: Set width of selected components to the largest one. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Shrink Width to Smallest</b>: Set width of selected components to the smallest one. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Make Same Width</b>: Set width of selected components to the width of first selected component. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Grow Height to Largest</b>: Set height of selected components to the largest one. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Shrink Height to Smallest</b>: Set height of selected components to the smallest one. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Make Same Height</b>: Set height of selected components to the height of first selected component. It's enabled when selected count &gt;= 2.</li>
  <li>
  <p class="text" align="left"><b>Make Same Size</b>: Set size of selected components to the size of first selected component. It's enabled when selected count &gt;= 2.</li>
  <li>
	<p class="text" align="left"><b>Center Horizontally</b>: Put selected component(s) to horizntal center of parent.</li>
	<li>
	<p class="text" align="left"><b>Center Vertically</b>: Put selected component(s) to vertical center of parent.</li>
  <li>
  <p class="text" align="left"><b>Bring to Front</b>: Bring selected component(s) to front.</li>
  <li>
  <p class="text" align="left"><b>Send to Back</b>: Send selected component(s) to back.</li>
  <li>
  <p class="text" align="left"><b>Snap to Grid</b>: Whether snap to grid when moving or sizing components in form designer.</li>
  <li>
  <p class="text" align="left"><b>Designer Guideline</b>: Whether show and snap to designer guideline when moving or sizing components in form designer. Only exists in BDS 2006.</li>
  <li>
  <p class="text" align="left"><b>Align to Grid</b>: Set align of selected component to snap to grid.</li>
  <li>
  <p class="text" align="left"><b>Size to Grid</b>: Set size of selected component to snap to grid.</li>
  <li>
  <p class="text" align="left"><b>Lock Controls</b>: Whether allow moving and sizing components by mouse in form designer.</li>
  <li>
  <p class="text" align="left"><b>Select Form</b>: Select current form designer.</li>
  <li>
  <p class="text" align="left"><b>Copy Component's Name</b>: Copy selected component name to clipboard and switch to source editor for pasting. If more than one components are selected, multi-line names will be copied. If Shift was pressed, No switching to source will be performed.</li>
	<li>
  <p class="text" align="left"><b>Copy Component's Class Name</b>: Copy selected component class name to clipboard and switch to source editor for pasting. If more than one components are selected, multi-line names will be copied. If Shift was pressed, No switching to source will be performed.</li>
	<li>
	<p class="text" align="left"><b>Hide Non-visual</b>: Hide/Show all non-visual components in current form. This setting does NOT affect those added later.</li>
  <li>
  <p class="text" align="left"><b>Arrange Non-visual</b>: Arrange non-visual components in current form. See below.</li>
	<li>
	<li>
	<p class="text" align="left"><b>Locate Components</b>: Show a search dialog to locate components in designer quickly.</li>
	<p class="text" align="left"><b>Convert to Code</b>: Convert Selected Components to Code. See below.</li>
	<li>
	<p class="text" align="left"><b>Float Toolbar Options</b>: Set the option of float toolbar.</li>
</ul>
<p class="text" align="left">&nbsp;</p>
<p class="title">Arrange Non-visual</p>
<p class="text">This function is used to arrange selected non-visual components in current form designer. When no selected, all non-visual components in current form designer will be arranged.</p>
<p align="center" class="text"><img src="arrangenonvisual.png"></p>
<ul>
  <li> 
    <p class="text" align="left"><b>By Row</b>: Arrange non-visual components by row first. You can specify how many components in a row.</li>
  <li> 
    <p class="text" align="left"><b>By Col</b>: Arrange non-visual components by column first. You can specify how many components in a column.</li>
  <li> 
    <p class="text" align="left"><b>Spaces</b>: Edge space of non-visual components  between rows or columns in pixels.</li>
  <li> 
    <p class="text" align="left"><b>After Aligned, Place to</b>: Move arranged non-visual components to some place, such as 'Top Left', 'Top Bottom', 'Bottom Left', 'Bottom Right' and 'Center'.</li>
  <li> 
    <p class="text" align="left"><b>Space to Form Edge</b>: The space from nearest non-visual component to form edge after arranging.</li>
  <li> 
    <p class="text" align="left"><b>Sort by Classname</b>: If this was selected, non-visual components will be sort by their classname before arranging.</li>
</ul>
<p class="text" align="left">&nbsp;</p>
<p class="title">Locate Components</p>
<p class="text">This function is used to search and locate components in designer quickly. It can list all the names, classnames and Caption or  Text property of  components and search in them.  The dialog is shown as below:</p>
<p align="center" class="text"><img src="listcomp.png"></p>
<ul>
  <li> 
    <p class="text"><b>Locate and Select Components</b>: Locate and select components in IDE designer.</p>
  </li>
  <li> 
    <p class="text"><b>Copy Component Name</b>: Copy selected components name to clipboard.</p>
  </li>
  <li>
    <p class="text"><b>Select All Components</b>: Select all components in the list.</p>
  </li>
  <li>
    <p class="text"><b>Cancel Selection</b>: Select none in the list.</p>
  </li>
  <li>
    <p class="text"><b>Inverse Selection</b>: Inverse selection in the list.</p>
  </li>
  <li>
    <p class="text"><b>Match Start</b>: Match the component name, classname and caption/text head when searching.</p>
  </li>
  <li>
    <p class="text"><b>Match All Parts </b>: Match any position of component name, classname and caption/text when searching.</p>
  </li>
  <li> 
    <p class="text"><b>Run Component Selector</b>: Run Component Selector Wizard to select components by more flexible way.</p>
  </li>
  <li> 
    <p class="text"><b>Font</b>: Change font of list.</p>
  </li>
  <li> 
    <p class="text"><b>Help</b>: Show this help.</p>
  </li>
  <li> 
    <p class="text"><b>Exit</b>: Close this window and Exit.</p>
  </li>
</ul>
<p class="text" align="left">&nbsp;</p>
<p class="title">Compare Properties</p>
<p class="text">This tool is used to compare properties of selected 2 components in current designer. Related menu items are also added to designer context menu. When this tool run, the main window is as below with menu, toolbar and properties list. The different value for same properties are shown in red background. If one property does not exist, it shows a blank line.</p>
<p align="center" class="text"><img src="propertycompare.png"></p>
<ul>
	<li> 
    <p class="text" align="left"><b>New Compare</b>: Create a new, empty compare window. You can select components to compare.</li>
  <li> 
    <p class="text" align="left"><b>Refresh</b>: Reload and re-compare properties from components in Designer.</li>
  <li> 
    <p class="text" align="left"><b>Options</b>: Open Settings dialog.</li>
    <p align="center" class="text"><img src="propertycompconfig.png"></p>
    <ul>
    	<li> 
        <p class="text" align="left"><b>Only Check Property Names</b>: This option determines how to know  two properties can be treated comparable. If checked, only needs same property names, otherwise needs same property names and types.</li>
      <li> 
        <p class="text" align="left"><b>Ignore Properties when Assign All</b>: You can specify which property names to ignore when assign all. Write one property name on each line.</li>
    </ul>
  <li> 
    <p class="text" align="left"><b>Exit</b>: Close this window.</li>
  <li> 
    <p class="text" align="left"><b>Select Left Component</b>: Use "Locate Components" to select a component in current designer for left to compare.</li>
  <li> 
    <p class="text" align="left"><b>Select Right Component</b>: Use "Locate Components" to select a component in current designer for right to compare.</li>
  <li> 
    <p class="text" align="left"><b>Run Component Selector for Left</b>: Use "Component Selector" to select a component in current designer for left to compare.</li>
  <li> 
    <p class="text" align="left"><b>Run Component Selector for Right</b>: Use "Component Selector" to select a component in current designer for right to compare.</li>
  <li> 
    <p class="text" align="left"><b>To Left</b>: Assign selected property value of right component to the one of left component and update in designer.</li>
  <li> 
    <p class="text" align="left"><b>To Right</b>: Assign selected property value of left component to the one of right component and update in designer.</li>
  <li> 
    <p class="text" align="left"><b>All to Left</b>: Assign all property values of right component to left component and update in designer. Some properties will be ignored according to settings. If a right property does not exists in left, just ignore.</li>
  <li> 
    <p class="text" align="left"><b>All to Right</b>: Assign all property values of left component to right component and update in designer. Some properties will be ignored according to settings. If a left property does not exists in right, just ignore.</li>
  <li> 
    <p class="text" align="left"><b>Previous Different</b>: Search and select the previous different property in list.</li>
  <li> 
    <p class="text" align="left"><b>Next Different</b>: Search and select the next different property in list.</li>
  <li> 
    <p class="text" align="left"><b>Only Show Different</b>: If checked, only different properties are visible in list, otherwise show all.</li>
  <li> 
    <p class="text" align="left"><b>Help</b>: Show this Help.</li>
</ul>
<p class="text" align="left">&nbsp;</p>
<p class="title">Convert to Code</p>
<p class="text">This function can be used to convert selected component(s) to creation code. Delphi and C++Builder are supported. The window is shown as below. The code is divided into two part: var declaration and initialization code.
</p>
<p align="center" class="text"><img src="comptocode.png"></p>
<ul>
  <li> 
    <p class="text" align="left"><b>Refresh</b>: Convert selected components in current form to code. If no component selected, the whole form will be converted. Converted count will be displayed at status bar once completed.</li>
  <li> 
    <p class="text" align="left"><b>Clear</b>: Clear var declaration and initialization code area.</li>
  <li> 
    <p class="text" align="left"><b>Copy Var Declaration</b>: Copy var declaration code to clipboard. No hint after Copy.</li>
  <li> 
    <p class="text" align="left"><b>Copy Initialization Code</b>Copy initialization code to clipboard. No hint after copy.</li>
  <li>
    <p class="text" align="left"><b>Copy the Whole Procedure</b>: Copy the whole creating procedure to clipboard, include var and initialization. It will show the Procedure name after copy.</li>
</ul>
<p class="title">&nbsp;</p>
<p class="title">Shortcut Settings</p>
<p class="text">You can set the shortcuts of menu items in
<a href="../options/wizconfig.htm">CnWizards Settings</a> as below:</p>
<p class="text" align="center">
<img src="alignsizeconfig.png"></p>
<p class="text" align="left">
You can set the shortcut of a menu item when select it.</p>
<p class="title" align="left">&nbsp;
<p class="title">Links</p>
<p class="text" align="left">
<a href="wizards.htm">Basic Operation</a><p class="text" align="left">
<a href="../options/wizconfig.htm">CnWizards Settings</a><p class="text" align="left">
<a href="../cnpack/index.htm">About CnWizards</a>
<p class="text" align="left">&nbsp; 
<hr>
<p class="text" align="center"><a href="http://www.cnpack.org">Copyrights 2001-2022 CnPack Team</a></p>
</body>
</html>